<template>
  <div>
    <button @click="handleClick">按钮</button>
    {{ msg }}
    <div ref="box">这是一个盒子</div>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue'
export default {
  setup() {
    const msg = ref("你好vue3")
    /* 
      生成了 一个包装对象，将基础数据类型的值 放到 包装对象的value中，使用Proxy
      返回 代理的包装对象
    */
    const handleClick = () => {
      msg.value = "值改变了"
    }
    // 获取dom
    const box = ref(null)
    // 生命周期钩子
    onMounted(() => {
      console.log(box.value);
    })
    return {
      msg,
      handleClick,
      box
    };
  },
};
</script>

<style lang="scss" scoped></style>
